<template>
  <div class="e-toolbar">
    <e-dropdown ref="drop" class="e-toolbar-input-tree" @show="onShow">
      <template slot="caller">
        <el-input v-model="filterText" :placeholder="placeholder" style="width:400px" @focus="onFocus" />
      </template>
      <div style="width: 500px;">
        <el-tree ref="tree" :data="treeData" default-expand-all check-on-click-node :filter-node-method="filterNode">
          <template slot-scope="{ node, data }">
            <!-- 只有零件或工步才能单选 -->
            <span>
              <el-radio v-if="data.nodeType === 3 || data.nodeType === 5" v-model="radios" :label="data.id" @change="handleNodeClick">{{ node.label }}</el-radio>
              <template v-else>
                {{ node.label }}
              </template>
            </span>
          </template>
        </el-tree>
      </div>
    </e-dropdown>
    <el-select v-model="level" clearable placeholder="默认" @change="onLevelChange">
      <el-option :value="0" label="展开全部" />
      <el-option :value="1" label="展开至第一级" />
      <el-option :value="2" label="展开至第二级" />
    </el-select>
  </div>
</template>

<script>

import { getStructureTree } from '@/api/fmea/common/structureTree'

export default {
  name: 'Toolbar',
  props: {
    // 聚焦节点
    focusParams: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      projectId: Number(this.$route.params.projectId),
      level: null,
      one: 1,
      filterText: '',
      placeholder: '请选择聚焦节点',
      radios: null,
      treeData: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    getStructureTree({ projectId: this.projectId }).then(res => {
      this.treeData = [res.data]
      const focusId = this.getFocusIdByProjectId(this.projectId)
      if (focusId) {
        this.radios = focusId
        this.updateTreePlaceholder()
      }
    })
  },
  methods: {
    onFocus() {
      if (!this.visible) {
        this.visible = true
      }
    },
    onShow(value) {
      if (!value) {
        this.filterText = null
      }
      this.visible = value
    },
    // 筛选
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 树节点点击事件
    handleNodeClick() {
      // 工步或零件节点点击触发聚焦
      this.updateTreePlaceholder()
      this.preTraverse(this.treeData[0], (res) => {
        if (res.id === this.radios) {
          this.$emit('on-check-node', this.radios, res.nodeType)
        }
      })
    },
    // 更新聚焦节点输入框提示
    updateTreePlaceholder() {
      const focusId = this.radios
      if (focusId) {
        this.preTraverse(this.treeData[0], (res) => {
          if (res.id === focusId) {
            this.placeholder = `聚焦节点：${res.label}`
            this.setProjectFocusId(this.projectId, focusId)
          }
        })
      } else {
        this.placeholder = '请选择聚焦节点'
      }
    },
    // 前序遍历
    preTraverse(node, fn) {
      const children = node.children || []
      fn(node)
      for (let i = 0; i < children.length; i++) {
        this.preTraverse(children[i], fn)
      }
    },
    onLevelChange(value) {
      this.$emit('on-level-change', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.e-toolbar {
  position: absolute;
  top: 10px;
  left: 16px;
  width: 100%;
  line-height: 50px;

  .e-toolbar-input-tree {
    margin-right: 5px;
  }
}
</style>
